<template>
  <div class="">
   <el-form ref="form" :model="form" label-width="100px">
  <el-form-item label="医生姓名：">
    <el-input v-model="form.name" style="width: 250px;"></el-input>
  </el-form-item>
  <el-form-item label="上传照片：">
   <el-upload
   style="width: 200px;height: 180px;background-color: #fff;text-align: center;"
  class="avatar-uploader"
  :show-file-list="false"
  action=''
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
   </el-form-item>
  <el-form-item label="所属院区：">
    <el-select v-model="form.districtId" placeholder="请选择活动院区">
      <el-option :label="item.name" :value="item.id" v-for="item in districtslist.list" :key="item.id"></el-option>
    </el-select>
  </el-form-item>
   <el-form-item label="所属科室：">
    <el-select v-model="form.departmentId" placeholder="请选择科室">
    <figcaption v-for="item in  keshilist.list" :key="item.id">
       <el-option-group v-if="item.children" :label="item.name">
        <el-option :label="abc.name"   :value="abc.id" v-for="abc in item.children" :key="abc.id"></el-option>
    </el-option-group>
       <el-option :label="item.name" :value="item.id" v-else></el-option>
    </figcaption>
  </el-select>
  </el-form-item>
   <el-form-item label="医生职称：">
    <el-select v-model="form.jobId" placeholder="请选择活动院区">
      <el-option :label="item.name" :value="item.id" v-for="item in jobslist.list" :key="item.id"></el-option>
    </el-select>
  </el-form-item>
    <el-form-item label="医生标签：">
    <el-select v-model="form.tags" placeholder="请选择活动院区"  multiple collapse-tags>
           <el-option :label="item" :value="item" v-for="item  in tagslist.list" :key="item"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="医生状态">
    <el-switch v-model="form.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="医生简介：">
    <el-input type="textarea" v-model="form.desc" style=" width: 250px;"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button type="primary" @click="onupdata">保存</el-button>
  </el-form-item>
</el-form>
  </div>
</template>

<script>
import { getdepartments, getdistricts, getjobs, gettags, updatedoctor, xgdoctor } from '@/api/hospital'
const getBase64 = (img, callback) => {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}
export default {
  computed: {
    route() {
      return this.$route.params
    },
  },
  data() {
    return {
      id: '',
      keshilist: '',
      districtslist: '',
      jobslist: '',
      tagslist: '',
      form: {
        name: '',
        username: '',
        districtId: '',
        departmentId: '',
        jobId: '',
        tags: '',
        status: false,
        desc: '',
        avatar: null,
      },
      imageUrl: '',
    }
  },
  methods: {
    async onupdata() {
      // this.form.tags = (this.form.tags || '')?.join()
      this.form.username = this.form.name

      const formData = new FormData()
      Object.keys(this.form).forEach(key => {
        if (this.form[key]) {
          formData.append(key, this.form[key])
        }
      })
      console.log(this.form)
      const data = await xgdoctor(this.id, formData)
      console.log(data)
      if (data) {
        this.$message({
          message: '保存成功',
          type: 'success',
        })
      } else {
        this.$message.error('错了哦，这是一条错误消息')
      }
    },
    async onSubmit() {
      console.log('submit!', this.form)
      console.log('img', this.imageUrl)

      this.form.tags = this.form.tags?.join()
      this.form.username = this.form.name

      const formData = new FormData()
      Object.keys(this.form).forEach(key => {
        if (this.form[key]) {
          formData.append(key, this.form[key])
        }
      })
      const data = await updatedoctor(formData)
      console.log('data', data)
      if (data) {
        this.$message({
          message: '创建成功',
          type: 'success',
        })
      } else {
        this.$message.error('错了哦，这是一条错误消息')
      }
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      getBase64(file, (url) => {
        this.imageUrl = url
        this.form.avatar = file
        console.log(this.imageUrl)
      })

      return false
    },
  },
  async created() {
    this.keshilist = await getdepartments()
    this.districtslist = await getdistricts()
    this.jobslist = await getjobs()
    this.tagslist = await gettags()
    // console.log(this.keshilist)
    // console.log(this.tagslist)
    if (this.$route.params.id) {
      // this.form = this.$route.params.id
      this.id = this.$route.params.id.id
      this.form.name = this.$route.params.id.name
      this.form.username = this.$route.params.id.name
      this.form.districtId = this.$route.params.id.district.id
      this.form.departmentId = this.$route.params.id.department.id
      this.form.jobId = this.$route.params.id.job.id
      this.form.tags = (this.$route.params.id.tags || '').split(',')
      this.form.status = this.$route.params.id.status ? 0 : 1
      this.form.desc = this.$route.params.id.desc
      this.form.avatar = this.$route.params.id.avatarUrl
      console.log(this.$route.params.id)
    }
    console.log(this.form)
  },
}
</script>

<style lang="scss" scoped>
.el-menu{
 width: 250px;
}
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
